<!-- 收益管理 -->
<template>
	<block v-if="openShow">
		<view class="earnings">
			<Tabs keyName="name" @change="change" :list="tabsData" @scrolltolower="scrolltolower"
				swiperItemStyle="border-bottom-right-radius: 30rpx;border-bottom-left-radius: 30rpx"
				itemStyle="margin: 20rpx 0">
				<template slot="nav">
					<view class="earnings_1">
						<!-- 上面深色部分 -->
						<view class="earnings-bg">
							<view class="earnings-price">
								<view class="flex flex-ai-c">
									<view style="margin-right: 10rpx;">收益总额(元)</view>
									<view class="flex flex-ai-c" style="padding-top: 9rpx;margin-top: 10rpx;"
										@click="priceShow = !priceShow">
										<i-icon icon="look" size="40rpx" />
									</view>
								</view>
								<view class="flex flex-js-sb flex-ai-c">
									<view class="f1">
										<text v-if="priceShow">{{info.total_income}}</text>
										<text v-else>*.**</text>
									</view>
									<view style="font-size: 26rpx;" class="withdrawal flex flex-ai-c flex-jc-c" @click="skip('/pages/my/withdrawal')">
										<view>去提现</view>
										<u-icon name="arrow-right" size="24rpx" color="#FCB527" />
									</view>
								</view>
							</view>
							<view class="earnings-price2">
								<view class="flex flex-dir-c flex-ai-c set">
									<text class="set-title">已结算金额(元)</text>
									<text class="set-price">{{info.total_settled_income || '0.00'}}</text>
								</view>
								<view class="flex flex-dir-c flex-ai-c set">
									<text class="set-title">未结算金额(元)</text>
									<text class="set-price">{{info.total_unsettled_income || '0.00'}}</text>
								</view>
							</view>
						</view>

						<!-- 下面半透明部分 -->
						<view class="earnings-rule flex flex-jc-c flex-ai-c">
							<view @click="incomeShow = true">
								<view style="margin-top: 10rpx;"><i-icon icon="shouyi" size="40rpx" /></view>
								<text style="margin-left: 10rpx;">
									收益规则
								</text>
							</view>
							<view @click="skip(`/pages/my/separateAccount`)">
								<view style="margin-top: 10rpx;"><i-icon icon="tixian" size="40rpx" /></view>
								<text style="margin-left: 10rpx;">提现记录</text>
							</view>
						</view>

					</view>
				</template>
				<template :slot="swiperCurrent+'tabs'">
					<income-list :loadStatus="loadStatus" @scrolltolower="scrolltolower" :device_name="device_name"
						:time="time" :swiperCurrent="swiperCurrent" :info="info.recode" @change="changeStatus" />
				</template>
			</Tabs>
			<!-- 弹出层 -->
			<device-popup @swichMenu="swichMenu" @changeAddress="changeAddress" @close="show = false"
				:show="show"></device-popup>
			<u-calendar :itemDisabled="false" closeOnClickOverlay ref="date" :maxDate="dateMonth[1]"
				:minDate="dateMonth[0]" :defaultDate="defaultDate" title="请选择明细日期" :show="show2" :mode="mode"
				@confirm="confirm" @close="show2 = false">
				<template v-slot:head>
					<view class="flex flex-ai-c flex-jc-sa date">
						<view v-for="(item,index) in date" :key="index" :class="[current == index ? 'active':'']"
							@click="changeDate(index)">
							{{item.name}}
						</view>
					</view>
				</template>
			</u-calendar>
			<u-modal justifyContent="flex-start" :show="incomeShow" title="收益规则" @confirm="incomeShow = false"
				confirmColor="#FCB527">
				<view class="slot-content">
					<rich-text :nodes="incomeRule.revenue_rule"></rich-text>
					<!-- <rich-text :nodes="incomeRule.settlement_notice"></rich-text> -->
					<!-- <rich-text :nodes="incomeRule.withdrawal_notice"></rich-text> -->
				</view>
			</u-modal>
		</view>
	</block>

</template>

<script>
	import Tabs from '@/components/tabs.vue'
	import devicePopup from '@/components/devicePopup.vue'
	import incomeList from './components/income_list.vue'
	import common from '@/api/common.js'
	import user from '@/api/user.js'
	export default {
		components: {
			Tabs,
			devicePopup,
			incomeList
		},
		data() {
			return {
				swiperCurrent: 0,
				loadStatus: '',
				incomeRule: '',
				date: [{
					name: '本日'
				}, {
					name: '本周'
				}, {
					name: '本月'
				}],
				tabsData: [{
						name: '待结算',
						value: 0
					},
					{
						name: '已结算',
						value: 1
					}
				],
				show: false, // 弹出层
				show2: false, // 日期
				mode: 'range', // 内容
				current: -1,
				defaultDate: [],
				dateMonth: [],
				priceShow: true,
				info: {
					order_total_money: 0,
					order_total_return_money: 0,
					recode: {
						list: []
					},
					total_income: 0
				},
				time: [],
				incomeShow: false,
				device_name: '',
				page: 1,
				openShow: false,
			};
		},
		onLoad() {
			this.revenueRule()
			this.time = this.getMouthTime('month')
			this.dateMonth = this.getMouthTime('month')
			this.getIncome()
			this.openShow = true
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.navigateTo({
					url: '/pages/my/separateAccount'
				})
			},1500)
		},
		methods: {
			scrolltolower() {
				if (this.loadStatus == 'nomore') return
				this.getIncome()
			},
			moreStatus(status) {
				this.loadStatus = status
			},
			async getIncome(device_no = '') {
				uni.showLoading()
				this.moreStatus('loading')
				const res = await user.getIncome({
					start_time: this.time[0],
					end_time: this.time[1],
					type: this.tabsData[this.swiperCurrent].value, ///必传
					device_no: device_no,
					page: this.page,
					page_size: 10
				})
				const {
					recode,
					...body
				} = res.data
				const {
					list,
					...body2
				} = recode
				this.info = {
					...body,
					recode: {
						...body2,
						list: [...this.info.recode.list, ...list]
					}
				}
				uni.hideLoading()
				this.moreStatus(list.length !== 0 ? 'loadmore' : 'nomore')
				if (list.length < 10) return this.moreStatus('nomore')
				if (list.length === 0) return false
				this.page += 1 // 当前页加1
			},
			async revenueRule() {
				const res = await common.revenueRule()
				this.incomeRule = res.data
			},
			changeStatus(type) {
				type ? this.show = true : this.show2 = true
			},
			changeDate(i) {
				this.current = i
				switch (i) {
					case 0:
						this.mode = 'single'
						const date = new Date()
						let year = date.getFullYear()
						let month = date.getMonth() + 1
						let day = date.getDate()
						month = month < 10 ? `0${month}` : month
						year = year < 10 ? `0${year}` : year
						day = day < 10 ? `0${day}` : day
						const d = `${year}-${month}-${day}`
						this.defaultDate = [d]
						this.$refs.date.selected = [d, d]
						break
					case 1:
						this.mode = 'range'
						this.defaultDate = this.getMouthTime()
						this.$refs.date.selected = this.getMouthTime()
						break
					case 2:
						this.mode = 'range'
						this.defaultDate = this.getMouthTime('month')
						this.$refs.date.selected = this.getMouthTime('month')
						break
				}
			},
			confirm(e) {
				this.reset()
				this.time = [e[0], e.slice(-1)[0]]
				this.dateMonth = this.time
				this.show2 = false
				this.getIncome()
				this.current = -1
			},
			// 获取本周日期
			getMouthTime(e) {
				let start_date, end_date;
				// 获取当前日期
				let currentDate = new Date();
				// 获取当前日期的星期几（0-6，其中0代表星期日）
				let currentDay = currentDate.getDay();
				// 计算距离本周第一天的天数差值
				let diff = currentDate.getDate() - currentDay + (currentDay === 0 ? -6 : 1);
				if (e == 'month') {
					// 获取本月第一天的日期
					start_date = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
					// 获取下个月第一天的日期
					let nextMonthFirstDay = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1);
					// 使用下个月第一天的日期减去一天，得到本月最后一天的日期
					end_date = new Date(nextMonthFirstDay.getTime() - 1);
				} else {
					// 计算本周第一天的日期
					start_date = new Date(currentDate.setDate(diff));
					// 计算本周最后一天的日期
					end_date = new Date(currentDate.setDate(currentDate.getDate() + 6));
				}
				// this.start_date = this.start_date.toLocaleDateString().replace(/\//g,"-")
				start_date = this.$u.timeFormat(start_date, 'yyyy-mm-dd');
				end_date = this.$u.timeFormat(end_date, 'yyyy-mm-dd');
				return [
					start_date, end_date
				]
			},
			//点击全部
			swichMenu() {
				this.reset()
				this.show = false
				this.device_name = ''
				this.getIncome()
			},
			///点击设备
			changeAddress(device_no, county_id, name) {
				this.reset()
				this.device_name = name
				this.show = false
				this.getIncome(device_no)
			},
			change(i) {
				this.reset()
				this.swiperCurrent = i
				this.getIncome()
			},
			reset() {
				this.page = 1
				this.info = {
					order_total_money: 0,
					order_total_return_money: 0,
					recode: {
						list: []
					},
					total_income: 0
				}
			},
			skip(url) {
				uni.navigateTo({
					url: url
				});
			
			},
		}
	}
</script>

<style>
	page {
		height: 100%;
		background: #F2F2F2;
	}
</style>
<style lang="scss" scoped>
	.active {
		background: rgb(237, 239, 252) !important;
		border: 1px solid rgb(74, 103, 248);
		position: relative;
	}

	.withdrawal {
		width: 129rpx;
		height: 56rpx;
		background: #FFFFFF;
		border-radius: 100rpx 0rpx 0rpx 100rpx;
		color: #FF9500;
		font-weight: 400;
	}

	.active::after {
		content: "";
		position: absolute;
		bottom: 0;
		right: 0;
		z-index: 2;
		border-bottom: 40rpx solid rgb(74, 103, 248);
		border-left: 40rpx solid transparent;
	}

	.active::before {
		position: absolute;
		content: "\2714";
		text-align: center;
		font-size: 20rpx;
		color: #fff;
		z-index: 3;
		right: 0;
		bottom: 0;
	}


	.date {
		view {
			padding: 20rpx 60rpx;
			border-radius: 10rpx;
			;
			background: rgb(245, 245, 245);
		}
	}

	.earnings {
		height: 100%;
		padding: 0 30rpx;

		.earnings_1 {
			background: #FFF5E0;
			border-radius: 30rpx;
			padding-bottom: 20rpx;
			margin-top: 20rpx;

			// 纯色部分
			.earnings-bg {
				padding: 40rpx 0;
				background: #FCB527;
				border-radius: 30rpx;

				// 分割线上面
				.earnings-price {
					box-sizing: border-box;
					padding: 0 0rpx 30rpx 40rpx;

					&>view:nth-child(1) {
						text {
							font-size: 26rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #666666;
							margin-right: 20rpx;
						}

						image {
							width: 30rpx;
							height: 20rpx;
						}
					}

					&>view:nth-child(2) {
						font-size: 70rpx;
						font-family: Avenir-Medium, Avenir;
						font-weight: 600;
						color: #333333;
						// margin-top: 10rpx;
					}
				}

				// 分割线下面
				.earnings-price2 {
					display: flex;
					justify-content: space-between;
					align-items: center;
					box-sizing: border-box;
					padding: 30rpx 40rpx 0 40rpx;
					margin: 0 50rpx;
					border-top: 1px solid #FFD788;

					.set {

						.set-title {
							font-size: 24rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #666666;
						}

						.set-price {
							font-size: 42rpx;
							font-family: Avenir-Medium, Avenir;
							font-weight: 500;
							color: #333333;
							margin-top: 20rpx;
						}
					}
				}

			}

			// 收益规则
			.earnings-rule {
				margin-top: 20rpx;

				&>view {
					display: flex;
					align-items: center;

					&:first-child {
						margin-right: 200rpx;
					}

					text {
						font-size: 24rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #FCB527;
					}

					image {
						width: 28rpx;
						height: 28rpx;
						margin-right: 12rpx;
					}
				}
			}
		}

	}

	/deep/.u-tabs {
		border-top-right-radius: 30rpx;
		border-top-left-radius: 30rpx;
	}
</style>